<!doctype html>
<html class="no-js fixed-layout">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Amaze UI Admin index Examples</title>
		<meta name="description" content="这是一个 index 页面">
		<meta name="keywords" content="index">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet" href="assets/css/amazeui.css" />
		<link rel="stylesheet" href="assets/css/admin.css">
		<link rel="stylesheet" href="assets/css/admin_custom.css" />
		<script src="assets/js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				function fixHeight() {
					if ($(window).width() < 640) {
						$("html").removeClass("fixed-layout")
					} else {
						$("html").addClass("fixed-layout")
					}
					if ($(window).width() > 640) {
						$("#iframe").attr("width", $(window).width() - 250 + "px");
					}
					$("#iframe").attr("height", $(window).height() - 164 + "px");
				}
				$(window).resize(function() {
					fixHeight();
				}).resize();
				//iframe加载
				$(".Hrefli").click(function() {
					$(".Hrefli").removeClass("menuactive")
					$(this).addClass("menuactive")					
					var iframexists=$(this).attr("_href")
					var Hreflink = $(this).children("a").attr("value")
					var Hreftext = $(this).children("a").text()
					var Hrefindex=$(this).index(".Hrefli")					
					//alert(iframexists)
					if($(window).width() > 640){
						if(iframexists==undefined){
							

							//alert(Hrefindex)
							//alert(Hreftext)
							$(this).attr("_value",Hrefindex)
							$(this).attr("_href",Hreflink)
							var iframewidth=$(window).width() - 250 + "px";
							var iframeheight=$(window).height() - 164 + "px"
							var iframecon="<iframe id='iframe'src="+Hreflink+"  frameborder='0'width="+iframewidth+" height="+iframeheight+" value="+Hrefindex+" ></iframe>"
							//alert(iframecon)
							var Tabclick="<li><a href=\"javascript:;\" class=\"close--circle\" style=\"display:none\" value="+Hrefindex+">×<\/a> <a href=\"#\">"+Hreftext+"<\/a><\/li>";
							$("iframe").hide()
							$(".breadcrumb").append(Tabclick)
							TabX();
							TabChange()
							$(".iframe-con").append(iframecon)						
						}else{
							$("iframe").hide();
							$("iframe[value="+Hrefindex+"]").css("display","inline-block")
						}						
					}else{
						$("#iframe").attr("src", Hreflink)
					}
					//$(".Hrefli").removeClass("menuactive")
					//$(this).addClass("menuactive")
					//var Hreflink = $(this).children("a").attr("value")
					//$(this).attr("_href",Hreflink)
					//$("#iframe").attr("src", Hreflink)			
				})

				$("div").on("click",function(){
					
				})
				
				$(".headermenu li").click(function(){
					$(".headermenu li").removeClass("current")
					$(this).addClass("current")
					var menuli=$(this).index()
					$(".menu").hide()
					$('.menu:eq('+menuli+')').show()
				})
				function TabChange(){
					$(".breadcrumb li").unbind("click").click(function(){
						var Tabindex=$(this).children('a').attr("value")
						//alert(Tabindex)
						//alert("ceshi")
						$("iframe").hide();
						var iframewidth=$(window).width() - 250 + "px";
						var iframeheight=$(window).height() - 164 + "px"
						
						$("iframe[value="+Tabindex+"]").css("display","inline-block")
						$("iframe[value="+Tabindex+"]").attr("width",iframewidth)
						$("iframe[value="+Tabindex+"]").attr("height",iframeheight)
					})		
					return false;
				}				
				function TabX(){
					$(".breadcrumb li").hover(function(){
						$(this).children(".close--circle").show()
					},function(){
						$(this).children(".close--circle").hide()
					})					
				}

				
				
								
			});
		</script>
	</head>

	<body>
		<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->
		<style>
			.pd8 {
				padding: 0.7rem;
			}
			
			@media only screen and (min-width: 1330px) {
				.show1 {
					display: none;
				}
			}
			
			@media (min-width: 1330px) {
				.show1 {
					display: none;
				}
			}
			
			.am-nav-pills>li+li {
				margin-left: 0px !important;
			}
			
			.am-topbar,
			.am-topbar a {
				color: #ddd;
			}
			
			.am-nav>li>a:focus,
			.am-nav>li>a:hover {
				background-color: #4f627e;
			}
			
			.headerbg {
				border-color: #50627f !important;
			}
			
			body {
				font-size: 1.4em;
			}
			
			.admin-sidebar-list li a {
				padding-left: 15px;
			}
			

			
			.headermenu span {
				display: block;
				padding-bottom: 8px;
			}
			
			.menuactive a {
				background-color: #f7f7f7 !important;
				color: #fb9337 !important;
			}
			
			@media only screen and (min-width: 640px) {
				.fixed2 {
					top: 50px !important;
					z-index: 1 !important;
				}
				.admin-main {
					padding-top: 155px !important;
				}
			}
			
			iframe {
				position: absolute;
				bottom: 50;
			}
			
			iframe {
				margin: 0;
				padding: 0;
				border: 0;
				outline: 0;
				font-size: 100%;
				vertical-align: baseline;
				background: transparent;
			}
			
			#iframe {
				margin-top: 0;
			}
			
			#iframe-wrap {
				height: 100%;
				overflow: visible;
				position: relative;
				z-index: 50;
			}
			.am-offcanvas-bar{
				overflow-y: hidden;
			}
			.fixed-layout .admin-content, .fixed-layout .admin-sidebar{
				overflow-y: auto;
			}
			.fixed2{
				
			}
.breadcrumb {
  
  
  list-style: none;
  background-color: transparent;
  border-radius: 0;
  font-size: 85%;
}
.breadcrumb .Tabcurrent {
	background-color: #FFFFFF;
}
.breadcrumb{
	padding-left: 3em !important;
}
ol{
	margin-top: 0.5em;
	margin-bottom: 0em !important;
}

.breadcrumb > li {
	padding: 0.4em 1.6em;
  display: inline-block;
  border-top: 1px solid #DDDDDD;
  border-right: 1px solid #DDDDDD;
  border-left: 1px solid #DDDDDD;
  position: relative;
  margin-right: 5px;
}
.breadcrumb > li [class*="am-icon-"]:before {
  color: #999999;
  margin-right: 5px;
}

.breadcrumb > .am-active {
  color: #999999;
}
.breadcrumb-slash > li + li:before {
  content: "/\00a0";
}			
.close--circle {
    position: absolute;
    z-index: 91;
    top: -9px;
    right: -9px;
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: rgba(153,153,153,0.6);
    border-radius: 10px;
}
		</style>
		<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->
		<header class="am-topbar admin-header topbar-color headerbg">
			<div class="am-topbar-brand">
				<strong><img src="assets/images/logo.png" />	</strong> <small>后台管理</small>

			</div>
			<div class="am-fl  ">
				<ul class="am-nav am-nav-pills ceshi">
					<form class="am-topbar-form am-topbar-left am-form-inline am-hide-md-down" role="search">
						<div class="am-form-group">
							<input type="text" class="am-form-field am-input-sm" placeholder="搜索">
						</div>
					</form>
				</ul>

			</div>

			<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success " data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

			<div class="am-collapse am-topbar-collapse " id="topbar-collapse">

				<ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list ">

					<li class="am-dropdown" data-am-dropdown>
						<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
							<span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span>
						</a>
						<ul class="am-dropdown-content">
							<li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
							<li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
							<li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
						</ul>
					</li>

					<li class="am-show-sm-only">
						<div class="am-form-group">
							<input type="text" class="am-form-field am-input-sm" placeholder="搜索" style="background: #f5f5ff;">
						</div>
					</li>

					<li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
				</ul>
			</div>
		</header>
		<header class="am-topbar admin-header topbar-color header fixed2">

			<div class="am-fl  ">
				<ul class="am-nav am-nav-pills ceshi2 headermenu">
					<li class="current"><a href="javascript:;"><span class="am-icon-home  am-icon-md" ></span>首页</a></li>
					<li><a href="javascript:;"><span class="am-icon-wrench  am-icon-md" ></span>基础设置</a></li>
					<li><a href="javascript:;"><span class="am-icon-group  am-icon-md" ></span>粉丝营销</a></li>
					<li><a href="javascript:;"><span class="am-icon-plug   am-icon-md" ></span>模块</a></li>
					<li><a href="javascript:;"><span class="   am-icon-md" ><img src="assets/images/iconfont-test-making.svg" width="30px" height="30px" />	</span>模拟测试</a></li>

				</ul>

			</div>

			<!--<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success " data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>-->

			<div class="am-collapse am-topbar-collapse " id="topbar-collapse">


			</div>
		</header>

		<div class="am-cf admin-main">
			<!-- sidebar start -->
			<div class="admin-sidebar am-offcanvas" id="admin-offcanvas">

				<div class="am-offcanvas-bar admin-offcanvas-bar">
					<ul class="am-list admin-sidebar-list menu">
						<li class="Hrefli"><a href="javascript:;" value="iframe-index.html"><span class="am-icon-home"></span> 首页</a></li>

						<li class="admin-parent">
							<a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file am-icon-fw"></span> 页面模块 <span class="am-icon-angle-right am-fr am-margin-right iconactive"></span></a>
							<ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
								<li class="Hrefli"><a href="javascript:;" class="am-cf" value="iframe-user.html"><span class="am-icon-check am-icon-fw"></span> 个人资料<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li>
								<li class="Hrefli"><a href="javascript:;" value="iframe-help.html"><span class="am-icon-puzzle-piece am-icon-fw"></span> 帮助页</a></li>
								<li class="Hrefli"><a href="javascript:;" value="iframe-gallery.html"><span class="am-icon-th am-icon-fw"></span> 相册页面<span class="am-badge am-badge-secondary am-margin-right am-fr"></span></a></li>
								<li class="Hrefli"><a href="javascript:;" value="iframe-log.html"><span class="am-icon-calendar am-icon-fw"></span> 系统日志</a></li>
								<li class="Hrefli"><a href="javascript:;" value="iframe-404.html"><span class="am-icon-bug am-icon-fw"></span> 404</a></li>
							</ul>
						</li>

						<li class="Hrefli"><a href="javascript:;" value="iframe-table.html"><span class="am-icon-table am-icon-fw"></span> 表格</a></li>

						<li class="Hrefli"><a href="javascript:;" value="iframe-form.html"><span class="am-icon-pencil-square-o am-icon-fw"></span> 表单</a></li>

						<li class="Hrefli"><a href="javascript:;"><span class="am-icon-sign-out"></span> 注销</a></li>

					</ul>

				</div>

			</div>
			<!-- sidebar end -->

			<!-- content start -->
			<ol class="breadcrumb">


			</ol>
			<div class="iframe-con">
				<iframe id="iframe" src="iframe-index.html"  frameborder="0" width="100%">
				</iframe>				
			</div>

			<!-- content end -->

		</div>

		<a href="#" class="am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}">
			<span class="am-icon-btn am-icon-th-list"></span>
		</a>

		<footer>
			<hr>
			<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
		</footer>

		<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

		<!--[if (gte IE 9)|!(IE)]><!-->

		<!--<![endif]-->
		<script src="assets/js/amazeui.min.js"></script>
		<script src="assets/js/app.js"></script>

	</body>

</html>